"use client";
import { WsStatus } from '@/app/earth/Map';


interface StatusBarProps {
  wsStatus: WsStatus;
}

export const StatusBar = ({ wsStatus }: StatusBarProps) => {
  return (
    <div style={{ 
      padding: 16,
      borderRadius: 8,
      backgroundColor: 'white',
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
        <div style={{
          width: 12,
          height: 12,
          borderRadius: '50%',
          marginRight: 10,
          backgroundColor: wsStatus === 'connected' ? '#28a745' : '#dc3545'
        }} />
        <span style={{ fontWeight: 600 }}>
          {wsStatus === 'connected' ? '服务已连接' : '服务未连接'}
        </span>
      </div>
      <div style={{ fontSize: 14, color: '#666' }}>
        最后更新: {new Date().toLocaleTimeString()}
      </div>
    </div>
  );
};
